<template>
    <el-card class="box-card">
        <el-text class="mx-1" type="primary">CryptoJS解密</el-text>
        <el-row :gutter="10">
            <el-col :span="24">
                <el-text class="mx-1" type="primary">key</el-text>
                <el-input v-model="keyInupt" :rows="4" type="textarea"  placeholder="输入key" />
            </el-col>
            <el-col :span="24">
                <el-text class="mx-1" type="primary">data</el-text>
                <el-input v-model="dataInupt" :rows="7" type="textarea" placeholder="输入data" />
            </el-col>
            <el-col>
                <el-button type="success" @click="decrypt" round>解密</el-button>
            </el-col>
            <el-col :span="24">
                <el-input v-model="endData" :rows="12" type="textarea" />
            </el-col>
        </el-row>
    </el-card>
 </template>
 <script setup >
 import { ref } from 'vue';
 import CryptoJS from 'crypto-js';
 const keyInupt = ref('');
 const dataInupt = ref('');
 const endData = ref('')
 const decrypt = ()=>{
    let  key = CryptoJS.enc.Utf8.parse(atob(keyInupt.value));
    let data = CryptoJS.enc.Base64.parse(dataInupt.value);
    let decryptedData = CryptoJS.AES.decrypt({ ciphertext: data }, key, { mode: CryptoJS.mode.ECB });
    // 显示真实数据
    endData.value = decryptedData.toString(CryptoJS.enc.Utf8);
 }
 </script>
 <style scoped lang="scss">
 .el-col{
    margin-top: 5px;
 }
 </style>